<script setup>
import {onMounted, ref} from 'vue'
import axios, {Cancel} from "axios";
const input = ref('')
const input2 = ref('')
const input3 = ref('')
const radio1 = ref('1')
let consultantId = ref("")
let realname = ref("")
let phone = ref("")
let age = ref("")
let gender = ref("")
onMounted(() => {
  consultantId.value = localStorage.getItem("consultantId")
  phone.value = localStorage.getItem("phone")
  age.value = localStorage.getItem("age")
  gender.value = localStorage.getItem("gender")
})
const Change = () =>{
  axios.put("/consultant/updateConsultant",{
    consultantId:consultantId.value,
    realname:input.value,
    phone:input2.value,
    age:input3.value,
    gender:radio1.value
  },{
    headers: {
      "Content-Type":"multipart/form-data"
    }
  })
      .then(res=>{
        if (res.data.code==200){
          localStorage.setItem('realname',input.value)
          localStorage.setItem('phone',input2.value)
          localStorage.setItem('age',input3.value)
          localStorage.setItem('gender',radio1.value)
          alert("修改成功")
        }else {
          alert("修改失败")
        }
      })
      .catch(err=>{
        alert("修改失败")
      })
}
const cancelChange = () =>{
  input.value = ""
  input2.value = ""
  input3.value = ""
}
</script>


<template>
<div>
  <ul>
    <li class="box">
      <span>用户姓名：</span>
      <el-input v-model="input" style="width: 240px" placeholder="Please input" class="input"/>
    </li>
    <li class="box">
      <span>手机号码：</span>
      <el-input v-model="input2" style="width: 240px" placeholder="Please input" class="input"/>
    </li>
    <li class="box">
      <span>年龄：</span>
      <el-input v-model="input3" style="width: 240px" placeholder="Please input" class="input"/>
    </li>
    <li class="box">
      <span>性别：</span>
      <el-radio-group v-model="radio1" class="input">
        <el-radio value="男" size="large">男</el-radio>
        <el-radio value="女" size="large">女</el-radio>
      </el-radio-group>
    </li>
    <li class="box">
      <el-button type="success" @click="Change()">保存</el-button>
      <el-button type="danger" @click="cancelChange()">删除</el-button>
    </li>
  </ul>
</div>
</template>

<style scoped>
ul{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 20px;
}
.box{
  margin: 15px auto;
  line-height: 32px;
}
.box span{
  margin-right: 40px;
  float: left;
}
.input{
  float: right;
}
</style>